<template>
  <div class="app-container">
    <git-navigation />
    <el-row :gutter="10">
      <el-col :span="6" :offset="1">
        <h3>SSH 密钥</h3>
        <span style="font-size: small">SSH 密钥用于在您的电脑和 GitLab 建立安全连接。</span>
      </el-col>
      <el-col :span="13">
        <h5>增加 SSH 密钥</h5>
        <span style="font-size: small">
          要添加一个 SSH 密钥, 您需要 <el-tooltip
            class="item"
            effect="dark"
            content="ssh-keygen -t xxxx -C 'email@example.com'"
            placement="top-start"
          ><span class="ssh-tip">生成一个</span></el-tooltip> 或使用一个 现有的 key。</span>
        <h5>Key</h5>
        <span style="font-size: small">粘贴您的 SSH 公钥，通常包含在 <span class="ssh-tip">~/.ssh/id_rsa.pub</span> 文件中，并以 <span
          class="ssh-tip"
        >ssh-rsa</span> 开头。不要使用您的 SSH 私钥。</span>
        <el-form ref="form" :rules="rules" style="margin-top:20px;" label-position="top" :model="form">
          <el-form-item prop="key" label="SSH Key">
            <el-input v-model="form.key" type="textarea" :rows="4" />
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="通过标题命名您的个人密钥 例如: My MacBook Key" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addSSHKey">添加密钥</el-button>
          </el-form-item>
        </el-form>
        <el-divider />
        <h4>您的 SSH 密钥
          <el-badge class="mark" :value="sshNum" />
        </h4>
        <el-table
          v-loading="loading"
          :data="sshList"
          :show-header="false"
          style="width: 100%"
        >
          <el-table-column prop="id" />
          <el-table-column prop="title" />
          <el-table-column prop="key">
            <template slot-scope="{row}">
              <span class="ssh-key">{{ row.key }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="{row}">
              {{ row.created_at | filterDuration }}
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="{row, $index}">
              <span class="ssh-action"><i
                v-clipboard:copy="row.key"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                title="点击复制"
                style="color: lightseagreen; font-size: medium"
                class="el-icon-document-copy"
              /></span>
              <span class="ssh-action"><i
                style="color: red; font-size: medium"
                class="el-icon-delete"
                @click="deleteSShKey(row.id, $index)"
              /></span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import { getData, postData } from '@/api/requestData'
    import GitNavigation from './components/GitNavigation'
    import { handleTimeDuration } from '@/utils/index'

    export default {
        filters: {
            filterDuration(time) {
                return handleTimeDuration(time)
            }
        },
        components: {
            GitNavigation
        },
        data() {
            return {
                pid: '',
                pname: '',
                form: {
                    title: '',
                    key: ''
                },
                rules: {
                    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
                    key: [{ required: true, message: 'ssh key不能为空', trigger: 'blur' }]
                },
                sshList: [],
                sshNum: 0,
                loading: true
            }
        },
        created() {
            this.pid = this.$route.params.pid
            this.pname = this.$route.params.projectName
        },
        mounted() {
            this.SSHKeysList()
        },
        methods: {
            addSSHKey() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const params = this.form
                        postData('/git/public/add/sshkey/', params).then((response) => {
                            this.$refs['form'].resetFields()
                            this.sshList.push(response.data)
                            this.$message.success(response.message)
                        }).catch(() => {
                        })
                    }
                })
            },
            SSHKeysList() {
                this.loading = true
                getData('/git/public/sshkeys').then((response) => {
                    this.sshList = response.data
                    this.sshNum = response.data.length
                    this.loading = false
                })
            },
            deleteSShKey(id, index) {
                this.$confirm('确认删除', '提示', {
                    confirmButtonType: 'warning',
                    cancelButtonType: 'text',
                    type: 'error'
                }).then(() => {
                    getData('/git/public/delete/sshkey/' + id).then((response) => {
                        this.sshList.splice(index, 1)
                        this.$message.success(response.message)
                    })
                }).catch(() => {
                    this.$message.info('取消删除')
                })
            },
            onCopy(e) {
                // 复制成功
                this.$message.success('复制成功')
            },
            onError(e) {
                // 复制失败
                this.$message('复制失败')
            }
        }
    }
</script>

<style scoped>
  .ssh-tip {
    color: #66b1ff;
  }

  .ssh-tip:hover {
    cursor: pointer;
  }

  .ssh-action:hover {
    cursor: pointer;
  }

  .ssh-action {
    display: inline-block;
    margin-right: 10px;
  }

  .ssh-key {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
